<template>
  <div class="back">
    <h1 class="title">全国新冠肺炎疫情数据大屏——Python大作业</h1>
    <div class="button">
      <el-row>
        <el-button type="primary" round @click="dataVisual" class="demo1">疫情数据可视化</el-button>
        <el-button type="success" round class="demo2" @click="dataPredict">AI智能预测疫情数据</el-button>
        <el-button type="info" round class="demo2" @click="addData">上报当日疫情数据</el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "welcome",
  data() {
    return {}
  },
  methods:{
    //数据可视化
    dataVisual(){
      this.$router.push("/index")
    },
    //填报疫情数据
    addData(){
      this.$router.push("/add/login")
    },
    //预测数据
    dataPredict(){
      this.$alert('抱歉，目前此功能还在开发中！', '系统消息', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'warning',
            message: "正在开发中！"
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.title{
  font-size: 50px;
}
.back {
  height: 100%;
  background:url("../images/test1.png") no-repeat fixed;
  background-size: cover;
  padding-bottom: 920px;
}
.button{
  padding-top: 50px;
  margin: 0 auto;
  /*position: fixed;*/
  /*left: 1100px;*/
  /*top:50px;*/
}
.button .demo1{
  padding-right: 20px;
  font-size: 30px;
}
.button .demo2{
  margin-left: 20px;
  font-size: 30px;
}
</style>